<template>
  <div class="about">
    <div id="car">
      <el-table
        ref="multipleTable"
        :data="$store.state.result"
        style="width: 100%"
        @selection-change="sel"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="图片" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.product_picture" style="height: 50px" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="120">
          <template slot-scope="scope">{{ scope.row.product_name }}</template>
        </el-table-column>
        <el-table-column prop="product_selling_price" label="单价" width="120">
        </el-table-column>
        <el-table-column prop="address" label="数量" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.num"
              @change="handleChange"
              :min="1"
              label="描述文字"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="总计">
          <template slot-scope="scope">
            ￥{{ scope.row.num * scope.row.product_selling_price }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="clear(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="box-bottom">
        <div>
          <span class="sp1"
            >总价:￥<big>{{ sum }}</big
            >元</span
          >
          <span class="sp2">结算({{ result.length }})</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      result: [],
    };
  },
  mounted() {},
  methods: {
    sel(val) {
      console.log(val);
      this.result = val;
    },
    handleChange() {
      this.$store.commit("handleChange");
    },
    clear(id) {
      this.$confirm("是否继续删除商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.commit("clear", id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  computed: {
    sum() {
      let pic = 0;
      this.result.forEach((item) => {
        pic += item.product_selling_price * item.num;
      });
      return pic;
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$store.state.username) {
        next();
      } else {
        next("/login");
      }
    });
    //因为数据存在vuex里 所以需要用到this 但是在这个守卫函数里 组件并没有被加载 所以就没有this next里可以传一个回调函数 这个回调的参数vm代表的就是这个页面的组件实例 通过vm.$store.state.username就可以拿到vuex里的数据
  },
};
</script>
<style lang="scss">
a {
  text-decoration: none;
  color: red;
}
#car {
  width: 80%;
  margin: 20px auto;
}
.box-bottom {
  width: 100%;
  height: 60px;
  background-color: white;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 5px;
}
.box-bottom div {
  float: right;
}
.sp1 {
  display: block;
  width: 200px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  font-weight: bold;
  float: left;
}
.sp2 {
  display: block;
  width: 150px;
  height: 60px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  font-weight: bold;
  float: left;
}
</style>
